<template>
    <transition :name="transitionName" @after-enter="onEnter" @after-leave="onLeave">
        <div class="ui-snackbar" @click="onClick">
            <div class="ui-snackbar__message">
                <slot>{{ message }}</slot>
            </div>

            <div class="ui-snackbar__action">
                <ui-button
                    class="ui-snackbar__action-button"
                    type="secondary"

                    :color="actionColor"

                    @click.stop="onActionClick"

                    v-if="action"
                >{{ action }}</ui-button>
            </div>
        </div>
    </transition>
</template>

<script>
import UiButton from './UiButton.vue';

export default {
    name: 'ui-snackbar',

    props: {
        message: String,
        action: String,
        actionColor: {
            type: String,
            default: 'accent' // 'primary' or 'accent'
        },
        transition: {
            type: String,
            default: 'slide' // 'slide' or 'fade'
        }
    },

    computed: {
        transitionName() {
            return 'ui-snackbar--transition-' + this.transition;
        }
    },

    methods: {
        onClick() {
            this.$emit('click');
        },

        onActionClick() {
            this.$emit('action-click');
        },

        onEnter() {
            this.$emit('show');
        },

        onLeave() {
            this.$emit('hide');
        }
    },

    components: {
        UiButton
    }
};
</script>

<style lang="scss">
@import './styles/imports';

$ui-snackbar-background-color   : #323232 !default;
$ui-snackbar-font-size          : rem-calc(14px) !default;

.ui-snackbar {
    align-items: center;
    background-color: $ui-snackbar-background-color;
    border-radius: $ui-default-border-radius;
    box-shadow: 0 1px 3px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
    display: inline-flex;
    font-family: $font-stack;
    max-width: rem-calc(568px);
    min-height: rem-calc(48px);
    min-width: rem-calc(288px);
    padding: rem-calc(14px 24px);
}

.ui-snackbar__message {
    color: white;
    cursor: default;
    font-size: $ui-snackbar-font-size;
    line-height: 1.5;
    flex-grow: 1;
}

.ui-snackbar__action {
    margin-left: auto;
    margin: rem-calc(-9px -12px);
    padding-left: rem-calc(48px);
}

.ui-snackbar__action-button {
    margin: 0;
    min-height: initial;
    min-width: initial;
    padding: rem-calc(12px);

    &:hover:not(.is-disabled) {
        background-color: rgba(white, 0.05);
    }

    body[modality="keyboard"] &:focus {
        background-color: rgba(white, 0.1);
    }
}

.ui-snackbar--transition-slide-enter-active,
.ui-snackbar--transition-slide-leave-active {
    transition: transform 0.4s ease;
}

.ui-snackbar--transition-slide-enter,
.ui-snackbar--transition-slide-leave-active {
    transform: translateY(rem-calc(84px));
}

.ui-snackbar--transition-fade-enter-active,
.ui-snackbar--transition-fade-leave-active {
    transition: opacity 0.4s ease;
}

.ui-snackbar--transition-fade-enter,
.ui-snackbar--transition-fade-leave-active {
    opacity: 0;
}
</style>
